<template>
  <el-dialog
    v-model="open" title="预留" width="800px" append-to-body :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form ref="reservationRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="预订时间" prop="roleName">
        <div>
          <el-tag
            v-for="(tag,index) in form.orderList" :key="index"
            class="checkedPlace"
            closable
            @close="tagClose(index)"
          >
            {{ tag.siteName }}:
            <br>
            {{ tag.orderTime.split(',').join('-') }}
          </el-tag>
        </div>
      </el-form-item>

      <el-form-item label="正常价格">
        <span class="cRed">￥{{ form.vip }}</span>
      </el-form-item>

      <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" /></el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="warning" @click="submitForm('0')">直接付款（￥{{ form.finalPrice }}）</el-button>
        <el-button type="primary" @click="submitForm('1')">预订场地</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { toRefs } from '@vueuse/shared'
import { computed } from '@vue/reactivity'
import { validPhone } from '../../../../../../utils/validate'
import { saveReserveInfo } from '../../../../../../api/ven/reserve'
import { watch } from 'vue'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'submitForm'])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  positionList: {
    type: Array,
    default: () => []
  }
})

const formBase = {
  submitType: '1', // 0 直接付款 1 预定场地
  fucType: '0', // 0 场地预定 1 预留
  orderType: '0', // 0 普通预定 1 长租预定 2 预留 3 锁场
  orderPersonType: '1',
  payType: '', // 0 扫码 1 现金 2 余额 3 银联  4 支付宝 5 微信 6 其他
  orderList: []
}
const data = reactive({
  form: {
    ...formBase
  },
  rules: {
    memberCardCode: {
      validator: (rule, value, callback) => {
        if (form.value.orderPersonType === '0') {
          if (!value) {
            callback('必填')
            return
          }
        }
        callback()
      },
      required: true
    },
    orderPersonName: { required: true, message: '必填', trigger: 'blur' },
    orderPersonTel: [
      { required: true, message: '必填', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (!validPhone(value)) {
            callback('手机号码错误')
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ],
    finalPrice: [
      { required: true, message: '必填', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (parseFloat(value) < 0) {
            callback('价格有误')
            return
          }
          callback()
        },
        trigger: 'blur'
      }
    ],
    payType: {
      validator: (rule, value, callback) => {
        if (form.value.submitType === '0') {
          if (!value) {
            callback('必填')
            return
          }
        }
        callback()
      },
      required: true,
      trigger: 'change'
    }
  }
})
const { form, rules } = toRefs(data)

const open = computed({
  get: () => props.modelValue,
  set: () => {}
})
watch(open, val => {
  if (val) {
    form.value = { ...formBase }
    form.value.orderList = _.cloneDeep(props.positionList)
  } else {
    proxy.resetForm('reservationRef')
  }
})
watch(() => form.value.orderList.length, () => {
  form.value.totalPrice = _.reduce(form.value.orderList, (a, b) => {
    return a + parseFloat(b.price)
  }, 0).toFixed(2)
  form.value.finalPrice = form.value.totalPrice
}
)

function tagClose(index) {
  if (form.value.orderList.length === 1) {
    proxy.$modal.msgWarning('至少保留一个场次')
    return
  }
  _.remove(form.value.orderList, (p, i) => i === index)
}

function changePersonType() {
  if (form.value.orderPersonType === '0') {
    form.value.payType = '2'
  } else {
    form.value.payType = ''
    form.value.memberCardCode = ''
  }
}

function submitForm(type) {
  form.value.submitType = type
  proxy.$refs['reservationRef'].validate(valid => {
    if (valid) {
      saveReserveInfo(form.value).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        emit('update:modelValue', false)
        emit('submitForm')
      })
    }
  })
}

function cancel() {
  emit('update:modelValue', false)
}

function openMemberList() {}
</script>

<style scoped></style>
